<!--商品详情-->
<template>
  <div class="w store-content">
    <div class="gray-box">
      <div class="gallery-wrapper">
        <div class="gallery">
          <div class="thumbnail">
            <ul>
              <li v-for="(item, i) in small " :key="i" :class="{on: item === big }" @click="handleClick(item)">
                <img :src="'http://127.0.0.1:8000/' + item">
              </li>
            </ul>
          </div>
          <div class="thumb">
            <div class="big">
              <img :src="'http://127.0.0.1:8000/' + big">
            </div>
          </div>
        </div>
      </div>

      <!--右边-->
      <div class="banner">
        <div class="sku-custom-title">
          <h4>{{ product.goods_name }}</h4>
          <h6>
            <span>{{ product.goods_describe}}</span>
            <span class="price">
              <em>¥</em>
              <i>{{ Number(product.goods_price).toFixed(2) }}</i>
              </span>
          </h6>
        </div>
        <div class="num">
          <span class="params-name">数量</span>
          <BuyNum @handleValue="handleVal" :num="1"></BuyNum>
        </div>
        <div class="buy">
          <!-- 这两个要加状态控制 -->
          <el-button type="primary" @click="addCart()" :disabled=" product.goods_num <= 0 || goods_num > product.goods_num " >加入购物车</el-button>
          <el-button type="danger" @click="checkout()" :disabled=" product.goods_num <= 0 || goods_num > product.goods_num" >现在购买</el-button>
        </div>
      </div>
    </div>

    <!--产品信息-->
    <div class="item-info">
      <shelf title="产品信息">
        <div slot="content">
          <div v-if="product.goods_introduce">
            <div class="ql-editor" v-html="product.goods_introduce"></div>
          </div>
          <div class="no-info" v-else>
            <img src="../../../public/images/no-data.png" alt="">
            <br>该商品暂无内容数据
          </div>
        </div>
      </shelf>
    </div>

    <!--产品评价-->
    <div class="item-info">
      <shelf :title=" '商品评价 (' +  total + ')' ">
        <div slot="content">
          <div class="gray-sub-title cart-title">
            <div class="first">
              <div>
                <el-tag :type="queryInfo.all ? 'success':'info'" @click="screenCom('all','0')">全部</el-tag>
                <el-tag v-for="(item, i) in tagList" :type="item.value === queryInfo.score ? 'success':'info'" :key="i" @click="screenCom('score',item.value)">{{ item.text }}</el-tag>
                <el-tag :type="queryInfo.hasimg ? 'success':'info'" @click="screenCom('img','0')">有图</el-tag>
              </div>
            </div>
          </div>
          <div v-if="comList.length">
            <el-card style="margin:5px 5px 15px" v-for="item in comList" :key="item.id">
              <div slot="header" class="clearfix">
                <div class="comment-box">
                  <div class="comment-avatar">
                    <el-avatar v-if="item.mp_User.avatar" :size="50" :src="'http://127.0.0.1:8000/' + item.mp_User.avatar"></el-avatar>
                    <el-avatar v-else :size="50" src='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'></el-avatar>
                  </div>
                  <div style="margin-left: 15px">
                    <span class="nickname">{{item.mp_User.nickname}}</span>
                    <span style="display:flex">
                      评分
                      <el-rate v-model="item.score" :colors="colors" show-text disabled > </el-rate>
                    </span>
                    <span style="display:flex">
                      {{ dateFormat(item.createdAt) }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-if="item.comment">
                <div class="ql-editor" v-html="item.comment"></div>
              </div>
            </el-card>
          </div>
          <div v-else class="no-info">
            <img src="../../../public/images/no-data.png" alt="">
            <br>该商品暂无评论数据
          </div>
          <div style="float:right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[1, 5, 10, 15, 20]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </shelf>
      
    </div>
  </div>
</template>
<script>
import BuyNum from "../../components/BuyNum.vue"
import shelf from "../../components/shelf.vue"
import { getGoodsDetail } from "../../api/goods"
import { getGoodComment } from "../../api/comment"
import { mapState, mapMutations } from "vuex"

export default {
  props:{
    id: {
      required: true,
      type: String
    }
  },
  data() {
    return {
      // 评论的查询参数
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        score: null,
        hasimg: false,
        all: true
      },
      // 评论列表
      comList: [],
      product: {},
      small: [],
      big: '',
      goods_num: 1,
      // 评价总数
      total: 0,
      // 评价tag
      tagList: [
        { text: '好评', type: 'info', value: 5},
        { text: '中评', type: 'info', value: 3},
        { text: '差评', type: 'info', value: 2},
      ],
      // 评分星星的颜色
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
    }
  },
  computed: {
    ...mapState(['login', 'addCartSuccess'])
  },
  created () {
    document.body.scrollIntoView()
    this.getGoodsDetailInfo()
    this.getComList()
  },
  
  methods: {
    ...mapMutations(['ADDCART']),
    async getGoodsDetailInfo() {
      const { data: res } = await getGoodsDetail(this.id)

      if (res.code !== 0) {
        return this.$message.error('获取商品失败！')
      }
      this.product = res.result
      // 将字符串转为数组
      this.small = this.product.goods_img.split(',')
      // 给数组去空
      this.small = this.small.filter(item => {
        return item && item.trim()
      })
      this.big = this.small[0]
      // console.log(this.small)
      // console.log(this.product)
    },
    handleClick(src) {
      this.big = src
    },

    handleVal(num) {
      this.goods_num = num 
    },
    // 添加到购物车
    async addCart() {
      if(!this.login) {
        return this.$router.push('/login')
      }

      const goods_id = Number(this.id) 
      const goods_number = this.goods_num

      await this.ADDCART({goods_id, goods_number})

      if(!this.addCartSuccess) {
        return this.$notify.error({
          title: '警告',
          message: '添加商品到购物车失败'
        })
      }
    },
    // 前往结算界面
    checkout() {
      this.$router.push({
        path: '/checkout',
        query: {goodsInfo: JSON.stringify(this.product) , num: this.goods_num}
      })
    },
    // 获取对应评论
    async getComList() {
      const { data: res } = await getGoodComment(this.id, this.queryInfo)

      if(res.code !== 0) {
        return this.$notify.error({
          title: '警告',
          message: '获取商品评价信息失败'
        })
      }
      
      this.comList = res.result.list
      this.total = res.result.total
      // console.log(res)
    },
    // 监听一页显示条数变化的函数
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getComList()
    },
    // 监听页码变化的函数
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getComList()
    },
    // 筛选评论
    screenCom(type, score) {
      this.queryInfo.pageNum = 1
      this.queryInfo.pageSize = 5
      if(type === 'score') {
        this.queryInfo.score = score
        this.queryInfo.hasimg = false
        this.queryInfo.all = false
      }else if(type === 'img') {
        this.queryInfo.hasimg = true
        this.queryInfo.score = null
        this.queryInfo.all = false
      }else if(type === 'all') {
        this.queryInfo.all = true
        this.queryInfo.score = null
        this.queryInfo.hasimg = false
      }
      console.log(this.queryInfo)
      this.getComList()
    },


    // 处理时间格式的函数
    dateFormat(originVal) {
      const dt = new Date(originVal)

      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
  },
  components: {
    BuyNum,
    shelf
  }
}
</script>

<style lang="scss">
.ql-align-center{
  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}
</style>
<style lang="scss" scoped>
@import "../../assets/style/mixin";

.store-content {
  clear: both;
  width: 1220px;
  min-height: 600px;
  padding: 0 0 25px;
  margin: 0 auto;
}

.gray-box {
  display: flex;
  padding: 60px;
  margin: 20px 0;
  .gallery-wrapper {
    .gallery {
      display: flex;
      width: 540px;
      .thumbnail {
        li:first-child {
          margin-top: 0px;
        }
        li {
          @include wh(80px);
          margin-top: 10px;
          padding: 12px;
          border: 1px solid #f0f0f0;
          border: 1px solid rgba(0, 0, 0, .06);
          border-radius: 5px;
          cursor: pointer;
          &.on {
            padding: 10px;
            border: 3px solid #ccc;
            border: 3px solid rgba(0, 0, 0, .2);
          }
          img {
            display: block;
            @include wh(100%);
          }
        }
      }
      .thumb {
        .big {
          margin-left: 20px;
        }
        img {
          display: block;
          @include wh(440px)
        }
      }
    }
  }
  // 右边
  .banner {
    width: 450px;
    margin-left: 10px;
    h4 {
      font-size: 24px;
      line-height: 1.25;
      color: #000;
      margin-bottom: 13px;
    }
    h6 {
      font-size: 14px;
      line-height: 1.5;
      color: #bdbdbd;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sku-custom-title {
      overflow: hidden;
      padding: 8px 8px 18px 10px;
      position: relative;
    }
    .params-name {
      padding-right: 20px;
      font-size: 14px;
      color: #8d8d8d;
      line-height: 36px;
    }
    .num {
      padding: 29px 0 8px 10px;
      border-top: 1px solid #ebebeb;
      display: flex;
      align-items: center;
    }
    .buy {
      position: relative;
      border-top: 1px solid #ebebeb;
      padding: 30px 0 0 10px;
    }
  }

  
}

.item-info {
  .gray-box {
    padding: 0;
    display: block;
  }
  .img-item {
    width: 1220px;
    text-align: center;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}

.no-info {
  padding: 200px 0;
  text-align: center;
  font-size: 30px;
}

.price {
  display: block;
  color: #d44d44;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: right;
  i {
    padding-left: 2px;
    font-size: 24px;
  }
}

.gray-sub-title {
  height: 48px;
  padding: 0 24px;
  background: #EEE;
  border-top: 1px solid #DBDBDB;
  border-bottom: 1px solid #DBDBDB;
  line-height: 48px;
  font-size: 12px;
  color: rgb(77, 54, 54);
  display: flex;
  .first {
    display: flex;
    justify-content: space-between;
    flex: 1;
    span {
      margin-right: 10px;
      cursor: pointer;
    }
  }
}

.comment-box {
  display: flex;
  justify-items: center;
  align-items: center;
  /* .comment-avatar {
    cursor: pointer;
  } */
  .nickname {
    line-height: 1.2;
    font-size: 16px;
    color: #424242;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
  }
  h3 {
    line-height: 1.2;
    font-size: 12px;
    color: #d0d0d0;
    padding: 10px;
    margin-left: -5px;
  }
  .del-btn {
    margin-left: 510px;
  }
}
</style>

